<!--用户界面,用户金融相关-->
<template>
  <div>
    <!-- 遍历渲染所有融资信息 -->
    <div v-for="(item, index) in FinanceAllData" :key="index">
      <!-- Element UI 描述列表组件，用于展示融资信息 -->
      <el-descriptions
        class="margin-top"
        :column="2"
        :size="size"
        title="我的融资信息"
        border
        style="width: 100%"
      >
        <!-- 描述列表的额外操作区域，放置修改和删除按钮 -->
        <template slot="extra">
          <!-- 修改按钮，点击触发 updateFinaceShow 方法 -->
          <el-button
            type="warning"
            size="small"
            @click="updateFinaceShow(item.financeId)"
          >修改</el-button>
          <!-- 删除按钮，点击触发 deleteFinace 方法 -->
          <el-button
            type="danger"
            size="small"
            @click="deleteFinace(item.financeId)"
          >删除</el-button>
        </template>
        <!-- 描述列表项：显示姓名 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{ item.realName }}
        </el-descriptions-item>
        <!-- 描述列表项：显示手机号 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ item.phone }}
        </el-descriptions-item>
        <!-- 描述列表项：显示身份证号 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            身份证号
          </template>
          {{ item.idNum }}
        </el-descriptions-item>
        <!-- 描述列表项：显示融资金额 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-money"></i>
            融资金额
          </template>
          {{ item.money }}
        </el-descriptions-item>
        <!-- 描述列表项：显示银行名称，调用 getBankName 方法转换银行 ID -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            银行
          </template>
          {{ getBankName(item.bankId) }}
        </el-descriptions-item>
        <!-- 描述列表项：显示利率 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-release"></i>
            利率
          </template>
          {{ item.rate }}
        </el-descriptions-item>
        <!-- 描述列表项：显示申请状态，根据状态值显示不同标签 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-warning-outline"></i>
            申请状态
          </template>
          <template>
            <el-tag type="danger" v-show="item.status === 0">申请中</el-tag>
            <el-tag type="danger" v-show="item.status === 1">驳回</el-tag>
            <el-tag type="danger" v-show="item.status === 2">通过</el-tag>
          </template>
        </el-descriptions-item>
        <!-- 描述列表项：显示联合融资人 1 姓名 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            联合融资人1姓名
          </template>
          {{ item.combinationName1 }}
        </el-descriptions-item>
        <!-- 描述列表项：显示联合融资人 1 手机号 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            联合融资人1手机号
          </template>
          {{ item.combinationPhone1 }}
        </el-descriptions-item>
        <!-- 描述列表项：显示联合融资人 1 身份证号 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            联合融资人1身份证
          </template>
          {{ item.combinationIdnum1 }}
        </el-descriptions-item>
        <!-- 描述列表项：显示联合融资人 2 姓名 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            联合融资人2姓名
          </template>
          {{ item.combinationName2 }}
        </el-descriptions-item>
        <!-- 描述列表项：显示联合融资人 2 手机号 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            联合融资人2手机号
          </template>
          {{ item.combinationPhone2 }}
        </el-descriptions-item>
        <!-- 描述列表项：显示联合融资人 2 身份证号 -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            联合融资人2身份证
          </template>
          {{ item.combinationIdnum2 }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 修改融资信息的对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="showUpdate"
      width="580px"
      :before-close="closeUpdate"
    >
      <!-- 融资信息表单，绑定 FinanceData 数据 -->
      <el-form
        v-model="FinanceData"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <strong style="color: green">修改融资信息：</strong>
        <!-- 表单项：融资额度 -->
        <el-form-item label="融资额度：" prop="money">
          <el-input v-model="FinanceData.money"></el-input>
        </el-form-item>
        <!-- 表单项：意向借款期，通过下拉框选择 -->
        <el-form-item label="意向借款期：" prop="repaymentPeriod">
          <el-select v-model="value" placeholder="意向借款期：">
            <!-- 遍历 options 数组渲染下拉选项 -->
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <strong style="color: green">用户1：</strong>
        <!-- 表单项：用户 1 姓名 -->
        <el-form-item label="姓名：" prop="realName">
          <el-input v-model="FinanceData.realName"></el-input>
        </el-form-item>
        <!-- 表单项：用户 1 联系方式 -->
        <el-form-item label="联系方式：" prop="phone">
          <el-input v-model="FinanceData.phone"></el-input>
        </el-form-item>
        <!-- 表单项：用户 1 身份证号 -->
        <el-form-item label="身份证号：" prop="idNum">
          <el-input v-model="FinanceData.idNum"></el-input>
        </el-form-item>

        <strong style="color: green">用户2：</strong>
        <!-- 表单项：联合融资人 1 姓名 -->
        <el-form-item label="姓名：" prop="combinationName1">
          <el-input v-model="FinanceData.combinationName1"></el-input>
        </el-form-item>
        <!-- 表单项：联合融资人 1 联系方式 -->
        <el-form-item label="联系方式：" prop="combinationPhone1">
          <el-input v-model="FinanceData.combinationPhone1"></el-input>
        </el-form-item>
        <!-- 表单项：联合融资人 1 身份证号 -->
        <el-form-item label="身份证号：" prop="combinationIdnum1">
          <el-input v-model="FinanceData.combinationIdnum1"></el-input>
        </el-form-item>

        <strong style="color: green">用户3：</strong>
        <!-- 表单项：联合融资人 2 姓名 -->
        <el-form-item label="姓名：" prop="combinationName2">
          <el-input v-model="FinanceData.combinationName2"></el-input>
        </el-form-item>
        <!-- 表单项：联合融资人 2 联系方式 -->
        <el-form-item label="联系方式：" prop="combinationPhone2">
          <el-input v-model="FinanceData.combinationPhone2"></el-input>
        </el-form-item>
        <!-- 表单项：联合融资人 2 身份证号 -->
        <el-form-item label="身份证号：" prop="combinationIdnum2">
          <el-input v-model="FinanceData.combinationIdnum2"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <!-- 取消按钮，点击触发 closeUpdate 方法 -->
        <el-button @click="closeUpdate">取 消</el-button>
        <!-- 确定按钮，点击触发 updateFinace 方法 -->
        <el-button type="success" @click="updateFinace">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入融资相关的 API 接口
import { selectByName, updateById, deleteById,selectFinaceById } from "@/api/finance";

export default {
  data() {
    return {
      size: "", // 描述列表的尺寸
      FinanceAllData: [], // 存储所有融资信息
      FinanceData: {
        financeId: "", // 融资信息 ID
        bankName: "", // 银行名称
        bankId: "", // 银行 ID
        realName: "", // 姓名
        phone: "", // 手机号
        idNum: "", // 身份证号
        money: "", // 融资金额
        repayment: "", // 还款信息
        combinationName1: null, // 联合融资人 1 姓名
        combinationPhone1: null, // 联合融资人 1 手机号
        combinationIdnum1: null, // 联合融资人 1 身份证号
        combinationName2: null, // 联合融资人 2 姓名
        combinationPhone2: null, // 联合融资人 2 手机号
        combinationIdnum2: null, // 联合融资人 2 身份证号
      },
      showUpdate: false, // 控制修改对话框的显示与隐藏
      options: [
        { value: 6, label: "六个月" },
        { value: 12, label: "一年" },
        { value: 24, label: "两年" },
        { value: 36, label: "三年" },
      ], // 意向借款期的选项
      value: "", // 选中的意向借款期的值
    };
  },
  methods: {
    // 根据银行 ID 获取银行名称
    getBankName(bankId) {
      if (bankId == "1005") {
        return "日照银行";
      }
      if (bankId == "1001") {
        return "青岛银行";
      }
      if (bankId == "1002") {
        return "中国银行";
      }
      if (bankId == "1004") {
        return "中国工商银行";
      }
      if (bankId == "1006") {
        return "华夏银行";
      }
      if (bankId == "1007") {
        return "中国建设银行";
      }
      if (bankId == "1008") {
        return "浦发银行";
      }
      if (bankId == "1009") {
        return "中国平安银行";
      }
      if (bankId == "1010") {
        return "中国民生银行";
      }
    },
    // 获取所有融资信息
    getData() {
      selectByName({}).then((res) => {
        if (res.flag == true) {
          this.FinanceAllData = res.data; // 更新融资信息列表
          console.log("bankId");
          console.log(res.data.bankId);
          if (res.data.bankId === "1005") {
            this.FinanceAllData.bankName = "日照银行";
          }
        } else {
          this.$message.error(res.data); // 显示错误信息
        }
      });
    },
    // 打开修改融资信息对话框
    updateFinaceShow(item) {
      this.showUpdate = true; // 显示对话框
      this.FinanceData.financeId = item; // 设置要修改的融资信息 ID
      selectFinaceById({id:this.FinanceData.financeId}).then((res) => {
        if (res.flag === true) {
          this.FinanceData = res.data; // 填充要修改的融资信息
          console.log("bankId");
          console.log(res.data.bankId);
        } else {
          this.$message.error(res.data); // 显示错误信息
        }
      });
    },
    // 提交修改融资信息
    updateFinace() {
      // 表单验证
      if (this.FinanceData.money === "" || this.FinanceData.money == null) {
        alert("融资额度不能为空");
        return;
      }
      if (this.value === "" || this.value == null) {
        alert("意向借款期不能为空");
        return;
      }
      if (this.FinanceData.realName === "" || this.FinanceData.realName == null) {
        alert("姓名不能为空");
        return;
      }
      if (this.FinanceData.phone === "" || this.FinanceData.phone == null) {
        alert("联系方式不能为空");
        return;
      }
      if (this.FinanceData.idNum === "" || this.FinanceData.idNum == null) {
        alert("身份证号不能为空");
        return;
      }
      // 调用 API 更新融资信息
      updateById({
        rate: 1.2,
        financeId: this.FinanceData.financeId,
        realName: this.FinanceData.realName,
        phone: this.FinanceData.phone,
        idNum: this.FinanceData.idNum,
        money: this.FinanceData.money,
        repayment: this.value,
        combinationName1: this.FinanceData.combinationName1,
        combinationPhone1: this.FinanceData.combinationPhone1,
        combinationIdnum1: this.FinanceData.combinationIdnum1,
        combinationName2: this.FinanceData.combinationName2,
        combinationPhone2: this.FinanceData.combinationPhone2,
        combinationIdnum2: this.FinanceData.combinationIdnum2,
      })
        .then((res) => {
          if (res.flag == true) {
            this.$message.success(res.message); // 显示成功信息
            this.getData(); // 刷新融资信息列表
            this.showUpdate = false; // 关闭对话框
          } else {
            this.$message.error(res.data); // 显示错误信息
          }
        })
        .catch((err) => {
          console.log("修改失败"); // 打印修改失败信息
        });
    },
    // 删除融资信息
    deleteFinace(item) {
      // 弹出确认对话框
      this.$confirm("确认删除该信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: 'warning'
      }).then(() => {
        // 调用 API 删除融资信息
        deleteById({
          financeId: item,
        })
          .then((res) => {
            if (res.flag === true) {
              this.$message.success(res.message); // 显示成功信息
              this.getData(); // 刷新融资信息列表
            } else {
              this.$message.error(res.data); // 显示错误信息
            }
          })
          .catch((err) => {
            console.log("删除失败"); // 打印删除失败信息
          });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        }); // 显示取消删除信息
      });
    },
    // 关闭修改融资信息对话框
    closeUpdate() {
      this.showUpdate = false; // 隐藏对话框
    },
  },
  // 组件创建时获取所有融资信息
  created() {
    this.getData();
  },
};
</script>
<style>
/* 描述列表样式，设置内边距 */
.el-descriptions {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}
</style>